import {Component} from "react";
import {View, Text} from "@tarojs/components";
import "./index.less";
import {AtNavBar} from 'taro-ui';
import {AtInput, AtForm} from 'taro-ui';
import {AtButton} from 'taro-ui';
import {abstractSvc} from "../../serverConfig/serverManager";
import MessageComponent from "../../components/messageComponent";
import {AbstractService} from "../../service/abstractService";

import Taro from '@tarojs/taro'

export default class Chat extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  state = {
    startX: 0,
    endX: 0,
    url: 'hello',
    editMessage: '',
    isOpened: false,
    chat: []
    // chat: [
    //   {
    //     key: '1',
    //     icon: 'https://www.manpingou.com/uploads/allimg/181024/25-1Q02411144R03.jpg',
    //     type: 'you',
    //     message: '由于微信开发者工具的问题，Input 的 placeholder 在 value 存在的情况下，会出现重叠，在真机上不会出现此问题，可以忽略'
    //   },
    //   {
    //     key: '1',
    //     icon: 'https://img.wxcha.com/m00/47/ca/95a25c2804b3a9bc7675d514ce74d2cd.jpg',
    //     type: 'me',
    //     message: 'Hello everyone! My name is LiHua.'
    //   },
    //   {
    //     key: '1',
    //     icon: 'https://www.manpingou.com/uploads/allimg/181024/25-1Q02411144R03.jpg',
    //     type: 'you',
    //     message: 'Hello everyone! My name is LiHua.'
    //   },
    //   {
    //     key: '1',
    //     icon: 'https://img.wxcha.com/m00/47/ca/95a25c2804b3a9bc7675d514ce74d2cd.jpg',
    //     type: 'me',
    //     message: '由于此组件是基于小程序的 Input 进行封装，该组件是原生组件，使用前请阅读使用限制'
    //   },
    // ]
  }

  handleChange(value) {
    this.setState({
      editMessage: value
    })
    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value
  }


  async sendMessage(message) {
    return Taro.request({
          url: '/message-api/?appid=0&key=free&msg=' + message,
          method: 'GET',
        }).then(res => {
      console.log(res)
      let newChat = this.state.chat;
      newChat.push({
        icon: 'https://www.manpingou.com/uploads/allimg/181024/25-1Q02411144R03.jpg',
        message: res.data.content,
        type: 'you'
      })
      this.setState({
          chat: newChat,
          editMessage: ''
        }
      )
      this.setState({
        url: res.toString()
      })
    })
    // abstractSvc.sendMessage(message).then(res => {
    //   console.log(res)
    //   let newChat = this.state.chat;
    //   newChat.push({
    //     icon: 'https://www.manpingou.com/uploads/allimg/181024/25-1Q02411144R03.jpg',
    //     message: res,
    //     type: 'you'
    //   })
    //   this.setState({
    //       chat: newChat,
    //       editMessage: ''
    //     }
    //   )
    //   this.setState({
    //     url: res.toString()
    //   })
    // })
  }

  render() {
    return (
      <>
        <View className={'bigBox'} onTouchMove={this.handleTouchMove.bind(this)}
              onTouchStart={this.handleTouchStart.bind(this)}
              onTouchEnd={this.handleTouchEnd.bind(this)}>
          <AtNavBar
            className='header'
            onClickRgIconSt={this.handleClick}
            onClickLeftIcon={() => Taro.eventCenter.trigger('changeModule')}
            color='#6190E8'
            title='有云陪着'
            leftIconType='chevron-left'
            rightFirstIconType='bullet-list'
          />
          <View id={'chatBox'} className="chatBox">
            {this.state.chat.map((item, index) => (
              <MessageComponent key={index} type={item.type} icon={item.icon} message={item.message}/>))}
          </View>
          <View className='inputArea'> <AtInput
            className='inputBox'
            name='value'
            title=''
            type='text'
            placeholder=''
            value={this.state.editMessage}
            onChange={this.handleChange.bind(this)}/>
            <AtButton onClick={() => this.createMessage()} className='btnBox' type='primary'
                      size='small'>发送</AtButton>
          </View>
        </View>


      </>

    );
  }

  async createMessage() {
    if (this.state.editMessage.trim() === '') return

    let newChat = this.state.chat;
    newChat.push({
      icon: 'https://img.wxcha.com/m00/47/ca/95a25c2804b3a9bc7675d514ce74d2cd.jpg',
      message: this.state.editMessage,
      type: 'me'
    })
    this.sendMessage(this.state.editMessage)
    this.setState({
        chat: newChat,
        editMessage: ''
      }
    )
  }

  handleTouchStart = (e) => {
    this.setState({
      startX: e.touches[0].clientX
    })
  };
  /*手在屏幕上移动*/
  handleTouchMove = (e) => {
    this.setState({
      endX: e.touches[0].clientX
    })
  };
  /*手离开屏幕*/
  handleTouchEnd = (e) => {
    // 获取滑动范围
    if (this.state.startX > 0 && this.state.endX > 0) {
      let distance = Math.abs(this.state.startX - this.state.endX);
      if (distance > 60 && this.state.startX < this.state.endX) {
        // Taro.eventCenter.trigger('changeModule')
      }
    }
    this.setState({
      startX: -1,
      endX: -1
    })
  };
}
